<template>
    <div>

        <div style="background: #eff3f6; height: 2360px; padding: 10px">
            <el-row class="sider-a clearfix">
                <div class="form-input">
                    <div class="grid-content bg-purple">
                        <div class="grid-content bg-purple"><span size="small" class="from-name">所属区域：</span>
                            <el-cascader size="small"
                                         :options="options2"
                                         @active-item-change="handleItemChange"
                                         :props="props"
                            ></el-cascader>
                        </div>
                    </div>
                </div>
                <div class="form-input">
                    <div class="grid-content bg-purple">
                        <div class="demo-input-suffix">
                            <span size="small" class="from-name">聊天时间：</span>
                            <el-date-picker size="small"
                                            v-model="value4"
                                            type="datetimerange"
                                            range-separator="至"
                                            start-placeholder="开始日期"
                                            end-placeholder="结束日期">
                            </el-date-picker>
                        </div>
                    </div>
                </div>
                <div class="form-input">
                    <div class="grid-content bg-purple">
                        <div class="grid-content bg-purple-light">
                            <el-button type="primary" size="mini"><i class="el-icon-search"
                                                                     style="font-size:14px; margin: 0px 4px 0px 0px;"></i>查询
                            </el-button>
                        </div>
                    </div>
                </div>
            </el-row>

            <el-row style="background: #fff;  margin-bottom: 10px;">
                <div class="sider-b">
                    <el-row class="s-t">
                        <el-col :span="24">
                            <div class="grid-content bg-purple-dark"></div>
                        </el-col>
                    </el-row>


                    <el-row class="s-b">
                        <el-col :span="24">
                            <div class="grid-content bg-purple-dark">
                                <el-col :span="24" class="sider-c">
                                    <div class="grid-content bg-purple-dark">
                                        <el-tabs v-model="activeName" @tab-click="handleClick" class="menu-t">
                                            <el-tab-pane label="关联记录" name="first"></el-tab-pane>
                                            <el-tab-pane label="时序统计" name="second"></el-tab-pane>
                                        </el-tabs>


                                    </div>
                                </el-col>


                            </div>
                        </el-col>
                    </el-row>


                    <div class="returnpanel" style="display: none"><i class="return-icon-bf"></i></div>


                    <el-row class="broadside" style="display: block">
                        <el-col :span="24">
                            <div class="grid-content bg-purple-dark">
                                <h1 class="tit-dx"><span class="gx-text">关联对象类型</span><i class=" return-icon "></i></h1>
                                <ul class="p-check">
                                    <li>
                                        <el-checkbox label=" 虚拟身份"></el-checkbox>
                                    </li>
                                    <li>
                                        <el-checkbox label="  MAC地址"></el-checkbox>
                                    </li>
                                    <li>
                                        <el-checkbox label="  手机号码"></el-checkbox>
                                    </li>
                                    <li>
                                        <el-checkbox label=" IMEI串号"></el-checkbox>
                                    </li>
                                    <li>
                                        <el-checkbox label=" IMSI串号"></el-checkbox>
                                    </li>
                                    <li>
                                        <el-checkbox label="  实名身份"></el-checkbox>
                                    </li>
                                </ul>
                                <h1 class="tit-dx"><span class="gx-text">关联关系类型</span></h1>
                                <ul class="p-check">
                                    <li>
                                        <el-checkbox label=" 上线记录"></el-checkbox>
                                        <span class="cs-text">4次</span>
                                    </li>
                                    <li>
                                        <el-checkbox label="上网记录"></el-checkbox>
                                        <span class="cs-text">13次</span>
                                    </li>
                                    <li>
                                        <el-checkbox label="聊天记录"></el-checkbox>
                                        <span class="cs-text">5次</span>
                                    </li>
                                    <li>
                                        <el-checkbox label=" 酒店同住"></el-checkbox>
                                        <span class="cs-text">6次</span>
                                    </li>
                                    <li>
                                        <el-checkbox label=" 手机机主"></el-checkbox>
                                        <span class="cs-text">1次</span>
                                    </li>
                                    <li>
                                        <el-checkbox label="涉案人员"></el-checkbox>
                                        <span class="cs-text">3次</span>
                                    </li>
                                </ul>
                                <h1 class="tit-dx"><span class="gx-text">关联关系类型</span></h1>
                                <ul class="p-check">
                                    <li><span size="small" class="from-name">关联次数：</span>
                                        <el-input size="mini" style="width: 95px" v-model="input"
                                                  placeholder="请输入内容"></el-input>
                                        -
                                        <el-input size="mini" style="width: 95px" v-model="input"
                                                  placeholder="请输入内容"></el-input>
                                        <el-button size="mini" class="primary-btn">确定</el-button>
                                    </li>


                                </ul>
                            </div>
                        </el-col>
                    </el-row>


                </div>

            </el-row>
            <el-col :span="24" class="sider-c">
                <div class="grid-content bg-purple-dark">
                    <el-tabs v-model="activeName" @tab-click="handleClick" class="menu-t">
                        <el-tab-pane label="关联轨迹" name="first"></el-tab-pane>
                        <el-tab-pane label="轨迹统计" name="second"></el-tab-pane>

                    </el-tabs>

                </div>
            </el-col>
            <el-col :span="24" class="sider-c">
                <div class="grid-content bg-purple-dark">
                    <el-tabs v-model="activeName" @tab-click="handleClick" class="menu-t">
                        <el-tab-pane label="关联轨迹" name="first"></el-tab-pane>
                        <el-tab-pane label="轨迹统计" name="second"></el-tab-pane>
                    </el-tabs>
                    <div class="formbox">
                        <div class="form-input">
                            <div class="grid-content bg-purple"><span size="small" class="from-name">关联对象：</span>
                                <el-input size="small" v-model="input" placeholder="请输入内容"
                                          style="width: 160px"></el-input>
                            </div>
                        </div>
                        <div class="form-input">
                            <div class="grid-content bg-purple-light"><span size="small"
                                                                            class="from-name">身份证/ID账号：</span>
                                <el-input size="small" v-model="input" placeholder="请输入内容"
                                          style="width:160px"></el-input>
                            </div>
                        </div>
                        <div class="form-input">
                            <div class="grid-content bg-purple-light"><span size="small" class="from-name">关联层级：</span>
                                <el-input size="small" v-model="input" placeholder="请输入内容"
                                          style="width:90px"></el-input>
                                -
                                <el-input size="small" v-model="input" placeholder="请输入内容"
                                          style="width:90px"></el-input>
                            </div>
                        </div>
                        <div class="form-input">
                            <div class="grid-content bg-purple-light">
                                <el-button type="primary" size="mini"><i class="el-icon-search"
                                                                         style="font-size:16px; margin: 0px 4px 0px 0px;"></i>查询
                                </el-button>
                            </div>
                        </div>
                    </div>
                </div>
            </el-col>

            <el-col :span="24" class="sider-c">
                <div class="grid-content bg-purple-dark">
                    <el-tabs v-model="activeName" @tab-click="handleClick" class="menu-t">
                        <el-tab-pane label="关联次数" name="first"></el-tab-pane>
                        <el-tab-pane label="关联频次" name="second"></el-tab-pane>


                    </el-tabs>


                </div>
            </el-col>


        </div>


    </div>
</template>

<script>
    export default {
        name: "trace",
        data() {
            return {
                options: [{
                    value: '选项1',
                    label: '黄金糕'
                }, {
                    value: '选项2',
                    label: '双皮奶'
                }, {
                    value: '选项3',
                    label: '蚵仔煎'
                }, {
                    value: '选项4',
                    label: '龙须面'
                }, {
                    value: '选项5',
                    label: '北京烤鸭'
                }],
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }],
                a1: '',

                activeName: 'first',

                radio2: '上海',

                value4: '',
                value5: [],
                options2: [{
                    label: '江苏',
                    cities: []
                }, {
                    label: '浙江',
                    cities: []
                }],
                props: {
                    value: 'label',
                    children: 'cities'
                }
            };
        },


        methods: {
            handleItemChange(val) {
                console.log('active item:', val);
                setTimeout(_ => {
                    if (val.indexOf('江苏') > -1 && !this.options2[0].cities.length) {
                        this.options2[0].cities = [{
                            label: '南京'
                        }];
                    } else if (val.indexOf('浙江') > -1 && !this.options2[1].cities.length) {
                        this.options2[1].cities = [{
                            label: '杭州'
                        }];
                    }
                }, 300);
            }
        }
    }
</script>

<style scoped>
    body,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    ul,
    p {
        margin: 0;
        padding: 0;
        font-weight: normal;
        list-style-type: none;
    }

    .sider-b {
        padding: 10px;
        position: relative;
    }

    .s-t {
        height: 610px;

        background: url("../assets/gxbg.png") no-repeat center;

    }

    .s-b {
        background: #f9f9f9;
        height: 400px;
    }

    .broadside {
        background: #f3f5f8;
        width: 360px;
        height: 600px;
        position: absolute;
        right: 10px;
        top: 10px;
        z-index: 9999;
    }

    .tit-dx {
        height: 30px;
        background: #419fff;
        padding: 0px 10px 0px 10px;
    }

    .gx-text {
        display: block;
        float: left;
        line-height: 30px;
        font-size: 14px;
        color: #fff;
        font-weight: bold;
    }

    .return-icon {
        width: 22px;
        height: 22px;
        background: url("../assets/waico.png") -207px -131px;
        float: right;
        margin: 6px 0px 0px 0px;
        cursor: pointer;
    }

    .returnpanel {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 4px 8px 0 rgba(28, 31, 33, .1);
        position: absolute;
        right: 40px;
        top: 40px;
        z-index: 9999;
        cursor: pointer;
    }

    .return-icon-bf {
        width: 20px;
        height: 20px;
        background: url("../assets/waico.png") -158px -131px;
        display: block;
        margin: 15px 0px 0px 14px;
    }

    .p-check {
        padding: 6px 10px 10px 10px;
    }

    .p-check li {
        display: block;
        line-height: 30px;
        text-align: left;
    }

    .cs-text {
        display: block;
        float: right;
        font-size: 14px;
        margin: 0px 10px 0px 0px;
    }

    .sider-a {
        height: 50px;
        background: #fff;
        margin: 10px 0px 10px 0px;
        padding: 10px 0px 10px 10px;
    }

    .primary-btn {
        color: #0082ff;
        margin: 2px 0px 0px 0px;
        float: right;
    }

    .from-name {
        font-size: 14px;
    }

    .sider-c {
        height: 400px;
        background: #fff;
        margin: 0px 0px 10px 0px;
    }

    .menu-t {
        margin: 10px 20px 0px 20px;
    }

    .form-input {
        float: left;
        padding: 0px 10px 0px 0px;
    }

    .formbox {
        margin: 0px 0px 0px 10px;
    }
</style>